﻿<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    

    <title>服务监控</title>
    
    <link rel="shortcut icon" href="favicon.ico"> 
	<link href="css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="css/font-awesome.min.css?v=4.4.0" rel="stylesheet">

    <!-- Data Tables -->
    <link href="css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">
    <link href="js/plugins/layui/css/layui.css" rel="stylesheet">
    <link href="css/animate.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/highcharts/9.1.2/css/highcharts.min.css">
    <link href="css/plugins/toastr/toastr.min.css" rel="stylesheet">
    <link href="css/style.min.css?v=4.0.0" rel="stylesheet" />

</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
			<div class="col-sm-12">
				<div class="ibox float-e-margins">
					<div class="ibox-title">
						<h5>服务器信息</h5>
						<div class="ibox-tools">
						    	<select id="serverSelect" class="form-control" style="margin-top:-5px" onchange="changeServer(this.value)">
							</select>
						</div>
					</div>
					<div class="ibox-content">
						<table class="table table-hover no-margins">
							<tr>
								<th style="border:0">计算机名</th>
								<td id="server.name" style="border:0;width:40%;"></td>
								<th style="border:0;">操作系统</th>
								<td id="server.os.name" style="border:0"></td>
							</tr>
							<tr>
								<th>服务器IP</th>
								<td id="server.ip"></td>
								<th>系统架构</th>
								<td id="server.os.arch"></td>
							</tr>
						</table>
					</div>
				</div>
			</div>
		</div>
		
		<div class="row">
			<div class="col-sm-12">
				<div class="ibox float-e-margins">
					<div class="ibox-title">
						<h5>CPU与内存信息</h5>
						<div class="ibox-tools">
							刷新时间间隔
							<select onchange="changeTimeout(this.value)">
								<option value='1000'>1s</option>
								<option value='2000'>2s</option>
								<option value='3000' selected="selected">3s</option>
								<option value='5000'>5s</option>
							</select>
							<!--<button type="button" onclick="changeTimeout(9999000)" class="btn btn-xs btn-outline btn-danger">暂停</button>-->
						</div>
					</div>
					<div class="ibox-content">
						<table class="table table-hover no-margins">
							<tr>
								<th style="border:0;width:100px;" id="cpu.total">内核数</th>
								<td id="cpu.core.size" style="border:0;"></td>
								<th style="width:100px;border:0;">Hz总量</th>
								<td id="cpu.mhz" style="border:0;"></td>
								<th style="border:0;width:100px;">型号</th>
								<td id="cpu.model" style="border:0"></td>
							</tr>
							<tr>
								<th style="border:0;width:100px;">内存总量</th>
								<td id="mem.total" style="border:0;"></td>
								<th style="border:0;width:100px;">swap总量</th>
								<td id="swap.total" style="border:0;"></td>
								<th style="border:0;width:100px;">JVM内存总量</th>
								<td id="mem.jvm.total" style="border:0"></td>
								<th style="width:100px;border:0;">执行器启动</th>
								<td id="java.start.time" style="border:0;"></td>

							</tr>
						</table>
						<div id="cpuMemInfo" style="width: 100%;height:280px;margin-top:20px;"></div>
					</div>
				</div>
			</div>
			
		</div>
		
		<div class="row">
			<div id="fileSystem" class="ibox float-e-margins">
				<div class="col-sm-12">
					<div class="ibox-title">
						<h5>硬盘信息</h5>
						<div class="ibox-tools">
							<a class="collapse-link">
								<i class="fa fa-chevron-up"></i>
							</a>
							<a class="close-link">
								<i class="fa fa-times"></i>
							</a>
						</div>
					</div>
				</div>
			
				
			</div>
		</div>
        
    </div>
    <script src="js/jquery.min.js?v=2.1.4"></script>
    <script src="js/bootstrap.min.js?v=3.3.5"></script>
	<script src="js/plugins/toastr/toastr.min.js"></script>
	<script src="js/plugins/layui/layui.js"></script>
	<script src="js/custom/layTool.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/highcharts/9.1.2/highcharts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/highcharts/9.1.2/modules/exporting.min.js"></script>
    <script type="text/javascript" src="js/custom/app.js" charset="UTF-8"></script>
    <script type="text/javascript" src="js/custom/tools.js" charset="UTF-8"></script>
    <script>
	timeout = 3000;
    </script>
    <script type="text/javascript" src="js/custom/server-monitor.cpuMemChart.js" charset="UTF-8"></script>
	
    <script>
	var server = '';
	function getAllBasicMonitorInfo(){
		var url = 'sysInfo/getAllBasicMonitorInfo';
		jQuery.ajax({
			url:domain + url,
			type:"get",
			data:{serverNode:server},
			crossDomain:true,
			xhrFields:{
				withCredentials:true
			},
			success:function (data) {
				if(data.status == 200){
					combBasicMonitorInfo(data.data);
				}else{
					top.toastr.warning(data.msg);
				}
			},
			error:function(data) {
				top.toastr.error("查询列表失败，请检查网络");
			}
		})
	}
	function changeTimeout(v){
	    timeout = v;

	}
	function changeServer(value){
	    server = value;
	    clearHtmlData();
	    getAllBasicMonitorInfo(server);
	    initChart(server,[0,0],[0,0]);
	}
	function initServer(){
	   jQuery.ajax({
		url:domain + "/sysServerNode/getAllServerNodes",
		type:"get",
		data:{},
		crossDomain:true,
		xhrFields:{
			withCredentials:true
		},
		success:function (data) {
			if(data.status == 200){
				combServerSelect(data.data);
			}else{
				top.toastr.warning(data.msg);
			}
		},
		error:function(data) {
			top.toastr.error("查询列表失败，请检查网络");
		}
	   })
	}
	function combServerSelect(data){
		if (data.length > 0){
         		var htmls = new Array();
	        	for (var i=0;i<data.length;i++){
		        	htmls.push('<option value="'+ data[i].server +'">'+ data[i].server +'</option>');
	
       		        }
		        $("#serverSelect").html(htmls.join(''));	
			server = data[0].server;
		        getAllBasicMonitorInfo(server);
			initChart(server,[0,0],[0,0]);
		}
	}
	function combBasicMonitorInfo(data){
		var hardDisk = new Array();
		for(var i=0;i<data.length;i++){
			var code = data[i].code;
			var info = data[i].info;
			$(get(code)).html(info);
			
			if(code.indexOf("filesystem")==0){
				var pos = code.indexOf(".");
				var prefix = code.substring(0,pos)
				var suffix = code.substring(pos+1,code.lenth);
				
				if(!hardDisk.includes(prefix)){
					hardDisk.push(prefix);
					createHardDisk(prefix);
				}
				
				if(suffix == "name"){
					$("#"+prefix).find("."+suffix).html(info);
				}else if(suffix == "used"){
					$("#"+prefix).find("."+suffix).css("width",info+"%");
					$("#"+prefix).find("."+suffix).attr("aria-valuenow",info);
					$("#"+prefix).find("."+suffix).html(info+"G");
				}else if(suffix == 'type.name'){
					$("#"+prefix).find(".typeName").html("（"+info+"）")
				}else if(suffix == 'used.percent'){
					$("#"+prefix).find(".used").css("width",info*100+"%");
					$("#"+prefix).find(".percent").html((info*100).toFixed(2)+"%");
				}else if(suffix == 'total'){
					$("#"+prefix).find(".total").html(info+"G");
				}
			}
		}
	}
	function clearHtmlData(){
		$(get("server.name")).html('');
		$(get("server.os.name")).html('');
		$(get("server.ip")).html('');
		$(get("server.os.arch")).html('');
		$(get("cpu.core.size")).html('');
		$(get("cpu.mhz")).html('');
		$(get("cpu.model")).html('');
		$(get("mem.total")).html('');
		$(get("mem.total")).html('');
		$(get("mem.total")).html('');
		$(get("swap.total")).html('');
		$(get("mem.jvm.total")).html('');
		$(get("fileSystem")).html('');
	}
	
	function createHardDisk(id){
		var html = new Array();
		html.push('<div id="'+ id +'" class="col-sm-6">');
		html.push('		<div class="ibox-content" style="padding-left:80px;padding-right:80px;">');
		html.push('			<div><small style="float:right;">当前使用率：<span class="percent"></span></small>');
		html.push('				 <h5><span class="name">D:/</span><span class="typeName"></span></h5></div>');
		html.push('			<div style="clear:both;"></div>');
		html.push('			<div class="progress progress-bar-default" style="text-align:right;">');
		html.push('				<div style="text-align:right;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="63" role="progressbar" class="progress-bar used">');
		html.push('				</div>');
		html.push('				<span class="total"></span>');
		html.push('			</div>');
		html.push('		</div>');
		html.push('</div>');
		$("#fileSystem").append(html.join(''));
	}
		
	$(function(){
		//getAllBasicMonitorInfo();
		initServer();
		Highcharts.setOptions({
                       global: {
                           useUTC: false //关闭UTC
                       }
                   });
		//initChart(server,[0,0],[0,0]);
	})
	
	</script>
</body>
</html>
